<template>
	<view :style="skin" class="content offlinemoney">
		<view class="topUp">
			<view class="inputTips">
				{{$t('me.TopupAmount')}}
			</view>
			<u--input :placeholder="$t('me.EnterAmount')" border="bottom" v-model="value" type='number' fontSize="28px"></u--input>
			<view class="inputTips">
				{{$t('me.Kwacha500')}}
			</view>
		</view>
		<view class="methodBox flex-c-SB">
			<text>{{$t('me.ComingFrom')}}</text>
			<text>{{$t('me.OnlineBalance')}}</text>
		</view>
		<u-button color="var(--subjectColor)" @click="handleRecharge">{{$t('me.ConfirmTopup')}}
		</u-button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		transferOffline,
		gtTotal
	} from '@/api/balance.js'
	import {
		addOrUpdateMoney,
		getMoneyInfo
	} from '@/utils/sql/sqlMoney.js'
	export default {
		data() {
			return {
				value: '',
				moneyObj: {}
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		methods: {
			getUserMoney() {
				gtTotal().then(res => {
					let arr = [{
						customerAccount: res.data.customerAccount,
						onMoney: res.data.amountOnline,
						offMoney: res.data.amountOffline,
						amountTotal: res.data.amountTotal,
						amountTurnover: res.data.amountTurnover,
						amountIncome: res.data.amountIncome,
						amountDeposit: res.data.amountDeposit

					}]
					arr.forEach(item => {
						addOrUpdateMoney(item)
					})
				})
			},
			handleRecharge() {

				if (this.value < 500) {
					uni.showToast({
						title: 'Minimum Top-up is 500 Kwacha',
						icon: 'none'
					})
					return false
				}

				transferOffline({
					amount: Number(this.value) * 100
				}).then(res => {
					if (res.code == 0) {
						this.getUserMoney()
						uni.navigateBack()

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.offlinemoney {
		padding: 16px;
		box-sizing: border-box;

		.topUp {
			height: 128px;
			background-color: #fff;
			border-radius: 12px;
			padding: 16px;
			box-sizing: border-box;

			/deep/input {
				height: 38px !important;
			}

			.inputTitle {}

			.inputTips {
				font-size: 12px;
				margin-top: 8px;
				color: #86909C;
			}
		}

		.methodBox {
			margin: 16px 0;
			height: 60px;
			background-color: #fff;
			border-radius: 12px;
			padding: 0 16px;
			box-sizing: border-box;

		}
	}
</style>